<template>
	<div class="content">
		<div class="content-block">
			<div class="article-content">
				<mp-html :content="detail.introduce" />
			</div>
		</div>
		<div class="step" @click="openEnrollmentPopup">
			我要报名
		</div>
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="在线报名" @confirm="dialogInputConfirm">
					<input v-model="name" type="text" placeholder="请输入姓名">
					<input v-model="phone" type="text" placeholder="请输入手机号">
				</uni-popup-dialog>

			</uni-popup>
		</view>

	</div>
</template>

<script>
	import {
	
		getUserEntrepreneursById
	} from '@/api/bus.js';
	import {
		userAddEntrepreneursUser
	} from '@/api/bus.js';
	import {
		showToast
	} from '@/util/util.js'
	export default {
		data() {
			return {
				detail: {},
				id: null,
				showPopup: false,
				name: '',
				phone: ''
			}
		},
		methods: {
			getDetail(id) {
				getUserEntrepreneursById({
					id: this.id
				}).then((res) => {
					console.log(res)
					this.detail = res
				})
			},
			openEnrollmentPopup() {
				this.showPopup = true;
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm() {
				userAddEntrepreneursUser({
						userName: this.name,
						phone: this.phone,
						entrepreneursId:this.id
					})
					.then((response) => {
						// 处理服务器返回的结果
						showToast('报名成功');
						this.closeEnrollmentPopup();
					})
					.catch((error) => {
						// 处理错误
						showToast('报名失败，请重试');
					});
			},
			closeEnrollmentPopup() {
				this.showPopup = false;
				this.$refs.inputDialog.close()
			},
			submitEnrollment() {
				// 在这里可以处理提交逻辑，比如将姓名和电话发送到服务器
				// 然后根据返回结果做相应的处理
				showToast('报名成功');
				this.closeEnrollmentPopup();
			}
		},
		onLoad(e) {
			this.id = e.id;

			this.getDetail()
		},
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}

	img {
		max-width: 100%;
	}

	.content {
		width: 100%;
		height: 100vh;
		padding-bottom: 20rpx;

		.content-block {


			padding: 30rpx;

			.title {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.sub-title {
				font-size: 28rpx;
				color: #999;
				margin-bottom: 30rpx;
			}
		}

		.step {
			width: 70%;
			height: 100rpx;
			display: flex;
			background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
			color: #fff;
			margin: 30rpx auto;
			border-radius: 60rpx;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 30rpx;
			right: 118rpx;
		}

		.popup {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.popup-content {
			background: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			text-align: center;
			width: 80%;
			height: 30%;

			.btn {}
		}

		.popup-content input {
			margin: 10rpx 0;
			padding: 5rpx;
		}

		.popup-content button {
			width: 100rpx;
			height: 30rpx;
			margin: 10rpx;
			padding: 10rpx 20rpx;
		}

	}
</style>